<template>
  <nav class="app-header">
    <div class="container">
      <nuxt-link :to="{name:'index'}" exact-active-class="app_header--active">
        <img src="../static/logo2.png" >
      </nuxt-link>
      <nuxt-link :to="{name:'index'}" exact-active-class="app_header--active">首页</nuxt-link>
      <nuxt-link to="/product" active-class="app_header--active">升本辅导</nuxt-link>
      <nuxt-link to="/school" active-class="app_header--active">招生院校</nuxt-link>
      <nuxt-link to="/major" active-class="app_header--active">招生专业</nuxt-link>
      <nuxt-link to="/news" exact-active-class="app_header--active">升本资讯</nuxt-link>
      <nuxt-link to="/news?2" active-class="app_header--active">升本资料</nuxt-link>
      <nuxt-link to="/news?1" exact-active-class="app_header--active">考试大纲</nuxt-link>
      <nuxt-link to="/campus" active-class="app_header--active">分校展示</nuxt-link>
      <nuxt-link to="/questions" active-class="app_header--active">交流社区</nuxt-link>
    </div>
  </nav>
</template>

<script>
export default{
  name:'app-header'
}
</script>

<style scoped="scoped" lang="scss">
.app-header{
  background-color: white;
  position: sticky;
  top: 100px;
  left: 0;
  z-index: 10;
}
.container{
  display: flex;
  font-size: 24px;
  font-weight: bold;
  a{
    margin: 0 auto;
    color: #333;
    height: 80px;
    font-size: 18px;
    line-height: 80px;
    font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif !important;
    img{
      margin-top: 15px;
      width: 195px;
      height: 50px;
    }
  }
  a.app_header--active{
    color: red;
}
}

</style>
